<template>
  <el-form autoComplete="on" :model="loginFormData" ref="loginForm" label-position="left" label-width="0px" class="card-box">
    <el-form-item prop="username" style="border: 1px solid #ccc; padding: 0 10px; border-radius: 5px">
      <i class="iconfont">&#xe618;</i>
      <el-input name="email" type="text" v-model="loginFormData.email" autoComplete="on" placeholder="邮箱" />
    </el-form-item>
    <el-form-item prop="password" style="border: 1px solid #ccc; padding: 0 10px; border-radius: 5px">
      <i class="iconfont">&#xe658;</i>
      <el-input @keyup.enter.native="handleLogin" v-model="loginFormData.password" placeholder="密码" type="password">
      </el-input>
    </el-form-item>
    <div class="login-form-footer">
      <el-link type="primary" @click="changeLoginType('forgotPassword')">忘记密码？</el-link>
      <el-link type="primary" @click="changeLoginType('register')">注册</el-link>
    </div>
    <el-form-item>
      <el-button type="primary" style="width: 100%; height: 44px" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
// import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

const props =defineProps({
  loginFormData: {
    type: Object,
    required: true
  },
  loading: {
    type: Boolean,
    required: true
  }
})

const emits = defineEmits(['changeLoginType'])

// const userStore = useUserStore()

// const updateUserInfo = (userInfo: any) => {
//   userStore.loginIn(userInfo)
// }

const handleLogin = () => {
  ElMessage.success("登录成功")
  const {code, data} = userStore.login(props.loginFormData)
  if (code === 200) {
    console.log(data)
  }
  if (code === 202){
    console.log(data)
  }
  // loginAdmin(props.loginFormData)
  //   .then((response: never) => {
  //     if (response) {
  //       ElMessage.success(response.message)
  //       updateUserInfo(response.data)
  //     }
  //   })
  //   .catch((error) => {
  //     ElMessage.error(error.message)
  //   })
}

const changeLoginType = (type: "login" | "register" | "forgotPassword") => {
  emits('changeLoginType', type)
}
</script>

<style scoped lang="scss">
.el-form {
  .el-input {
    height: 47px;
    flex: 1;

    :deep().el-input__wrapper {
      background-color: transparent;
      box-shadow: none;
    }

    :deep()input {
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      padding: 12px 5px 12px 15px;
      height: 100%;
      font-size: 16px;
    }
  }

  .login-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 20px;
  }
}

.iconfont {
  font-size: 30px;
}
</style>
